---
id: sheet
title: Sheet
sidebar_label: Sheet
---

The `Sheet` component is used to display sliding panels from the edges of the screen. It can be opened from the top, bottom, left, or right, and may be either opaque or transparent.

## Usage

To use the `Sheet`, import it from your components and pass the `open`, `side`, `transparent`, and `onOpenChange` props.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Sheet

A simple sheet that slides in from the right.

import SheetBasicDemo from '../../samples/components/sheet/sheet_basic';
import SheetBasicSource from '!!raw-loader!../../samples/components/sheet/sheet_basic';

<CodeSample>
    <SheetBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{SheetBasicSource}</CodeBlock>

## Sheet with Top Side

This example demonstrates a sheet that slides in from the top.

import SheetTopDemo from '../../samples/components/sheet/sheet_top';
import SheetTopSource from '!!raw-loader!../../samples/components/sheet/sheet_top';

<CodeSample>
    <SheetTopDemo/>
</CodeSample>

<CodeBlock language="tsx">{SheetTopSource}</CodeBlock>

## Transparent Sheet

This sheet is configured to be transparent.

import SheetTransparentDemo from '../../samples/components/sheet/sheet_transparent';
import SheetTransparentSource from '!!raw-loader!../../samples/components/sheet/sheet_transparent';

<CodeSample>
    <SheetTransparentDemo/>
</CodeSample>

<CodeBlock language="tsx">{SheetTransparentSource}</CodeBlock>